<template>
  <Form class="form" :model="form" :label-width="100">
    <FormItem prop="name" label="商品分类">
      家用电器 > 大家电 > 冰箱
    </FormItem>
    <FormItem prop="name" label="商品名称">
      <Input type="text" v-model="form.name" placeholder="商品名称" />
    </FormItem>
    <FormItem prop="description" label="商品描述">
      <Input type="textarea" v-model="form.name" placeholder="商品描述" />
    </FormItem>
    <FormItem prop="attributes" label="商品属性">
    </FormItem>
    <FormItem prop="imageUrls" label="商品轮播图">
      <div class="upload-list" v-for="item in form.imageUrls" :key="item.url">
        <img :src="item.url">
        <div class="upload-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
          <Icon type="ios-trash-outline" @click.native="handleRemove(item.url)"></Icon>
        </div>
      </div>
      <Upload
        ref="upload"
        name="files"
        :show-upload-list="false"
        :default-file-list="form.imageUrls"
        :on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'imageUrls')"
        :format="['jpg','jpeg','png']"
        :max-size="2048"
        :on-format-error="(file, fileList) => handleFormatError(file, fileList, 'imageUrls')"
        :on-exceeded-size="(file, fileList) => handleExceededSize(file, fileList, 'imageUrls')"
        :action="`${host}/assist/files/upload`"
        style="display: inline-block;width:58px;"
        type="drag"
      >
        <div style="width: 58px;height:58px;line-height: 58px;">
          <Icon type="ios-add" size="20"></Icon>
        </div>
      </Upload>
    </FormItem>
    <FormItem prop="detailImageUrls" label="商品详情">
      <div class="upload-list" v-for="item in form.detailImageUrls" :key="item.url">
        <img :src="item.url">
        <div class="upload-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
          <Icon type="ios-trash-outline" @click.native="handleRemove(item.url)"></Icon>
        </div>
      </div>
      <Upload
        ref="upload"
        name="files"
        :show-upload-list="false"
        :default-file-list="form.detailImageUrls"
        :on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'detailImageUrls')"
        :format="['jpg','jpeg','png']"
        :max-size="2048"
        :on-format-error="(file, fileList) => handleFormatError(file, fileList, 'detailImageUrls')"
        :on-exceeded-size="(file, fileList) => handleExceededSize(file, fileList, 'detailImageUrls')"
        :action="`${host}/assist/files/upload`"
        style="display: inline-block;width:58px;"
        type="drag"
      >
        <div style="width: 58px;height:58px;line-height: 58px;">
          <Icon type="ios-add" size="20"></Icon>
        </div>
      </Upload>
    </FormItem>
  </Form>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    handleUploadSuccess (response, file, fileList, fieldName) {
      console.log(response, file, fileList)
      this.form = {
        ...this.form,
        [fieldName]: [
          ...this.form[fieldName],
          ...response.map(url => ({
            url,
          })),
        ],
      }
    },
    handleFormatError (file, fileList) {
      console.log(file, fileList)
    },
    handleExceededSize (file, fileList) {
      console.log(file, fileList)
    },
    handleView (url) {
      console.log(url)
    },
    handleRemove (url, fieldName) {
      this.form.imageUrls.splice(this.form[fieldName].indexOf(url), 1)
    },
  },
}
</script>

<style>

</style>